Making a ‘Tab’ in HTML

Yesterday we had a silly problem crop up in our team. We had a mail notification sent for a particular action in our application. After a point when evrything seemed working fine, we noticed that the mail body needed to be formatted somehow to make it look better and more readable. Then this whole problem of having a tab seq. on the mail body showed up. All we could implement was HTML to format the text.

So here are my findings for the same…so that next time me or you whosoever faces something like this has a handy solution for the same:

1. Preformatted

You can put tab characters in your HTML directly if you use what’s called “preformatted” text.In HTML, surround text that you want “preformatted” in a pair of “<pre>” and “</pre>” start and end tags. Any spacing characters you put between those tags (including tab characters) will show up just as you entered them. The result looks something like this:

Otherwise, you can’t put tabs in HTML directly. It’s not built for it, because HTML is a language for expressing content, not formatting. This is why many designers have a love-hate relationship with HTML.

However, you can do something that looks a lot like a tab. In fact, there several ways to make something that looks like a tab in HTML.

2. Tables

You can use a html table so that everything you put within the set of rows(<tr>) and columns(<td>) shows up the same way. You can very well hide the table borders to show the text alone.

3. Using the <dd> Tag 

The <dd> tag is for formatting definitions. But it also will create a line break and make a tab! Here’s an example of a couple of paragraphs that are formatted with the <dd> tag to make a nice tab at the start of the line. The way to use the tag is:

<p><dd> Put your text here..</dd></p>

4.  &nbsp;, The Non-Breaking Space

One bit of HTML code I used in the table example is the “non-breaking space,” encoded as   in HTML. This just gives you some space. Combined with a line break, <br>, you can create some tab-like effects. For example, you can:

  Indent a line

or put     extra     space     in a line,

but you can’t make text on different lines line up, like you can with the table or <pre> tag.

~ by Neha Sinha on January 31, 2008.